<template>
  <div class="container order-detail">
    <div class="container-top">
      <div class="top-name">激活订单详情</div>
    </div>
    <div class="main">
      <div class="table-content1">
       <div class="content-item">
          <div class="table-list">订单编号：{{detail.orderCode }}</div>
          <div class="table-list">订单生成时间：{{detail.gmtCreated }}</div>
          <div class="table-list">订单金额：{{detail.price || '暂无信息'}}</div>
       </div>
       <div class="content-item">
          <div class="table-list">订单状态：{{statusDict[detail.actionOrderStatus] || '暂无信息'}}</div>
          <div class="table-list">支付方式：{{detail.payType == 'ALIPAY'?"支付宝":"微信支付"}}</div>
          <div class="table-list">有效期：{{detail.endTime }}</div>
       </div>
      </div>
      <div class="title-desc">订单详细信息</div>
      <div class="group-wrap">
        <div class="group-item">
          <div class="group-title">配送信息</div>
          <div class="group-table">
            <div class="table-m">
              <div class="m-name">收货人：</div>
              <div class="m-value">{{detail.contactName || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">手机号码：</div>
              <div class="m-value">{{detail.telNumber || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">详细地址：</div>
              <div class="m-value">{{detail.address+detail.detailedAddress || '暂无信息'}}</div>
            </div>
          </div>
        </div>
        <div class="group-item">
          <div class="group-title">用户信息</div>
          <div class="group-table">
            <div class="table-m">
              <div class="m-name">用户名称：</div>
              <div class="m-value">{{detail.userName || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">User ID：</div>
              <div class="m-value">{{detail.userId || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">手机号：</div>
              <div class="m-value">{{detail.mobile || '暂无信息'}}</div>
            </div>
            <div v-if="detail.actionTime" class="table-m">
              <div class="m-name">支付时间：</div>
              <div class="m-value">{{detail.actionTime || '暂无信息'}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="title-desc">快递信息</div>
      <el-table
            :data="detail.logisticsDTOList"
            class="table-group"
            border>
            <el-table-column prop="logisticsCompany" label="物流公司"></el-table-column>
            <el-table-column prop="logistics" label="物流单号"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="remark" label="物流详情">
              <template slot-scope="scope">
                 <el-button @click="getLogD(scope.row)" size="mini" type="primary" >查看物流</el-button>
              </template>
            </el-table-column>
        </el-table>
      <div class="group-wrap">
        <div class="group-item">
          <div class="group-title">商品信息</div>
          <div class="group-table one">
            <div class="table-m">
              <div class="m-name">商品名称：</div>
              <div class="m-value">{{detail.productTitle || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">商品编号：</div>
              <div class="m-value">{{ detail.productCode|| '暂无信息'}}</div>
            </div>
             <div class="table-m">
              <div class="m-name">单价（金额）：</div>
              <div class="m-value">{{detail.price}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">数量：</div>
              <div class="m-value">{{detail.count}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">规格：</div>
              <div class="m-value">{{detail.modelName}}  {{detail.modelSize}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">供应商：</div>
              <div class="m-value">{{detail.supplier}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="btns">
        <el-button type="primary" @click="back()">返回</el-button>
        <el-button v-if="detail.actionOrderStatus == 'WAIT_SEND'" type="primary" @click="sendProduct(detail)">发货</el-button>
      </div>
    </div>
    <el-dialog title="发货信息" :visible.sync="dialogVisible" width="40%">
       <el-form
        label-width="100px"
      >
        <el-form-item
          label="物流公司："
          prop="logisticsCompany"
        >
          <el-select filterable v-model="param.logisticsCompany">
            <el-option v-for="(item,index) in selectArr" :key="index" :value="item.value" :label="item.value"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item
          label="物流单号："
          prop="logistics"
        >
          <el-input style="width:300px" v-model="param.logistics" placeholder="请输入物流单号"></el-input>
        </el-form-item>
         <el-form-item
          label="备注："
          prop="sellerMemo"
        >
          <el-input style="width:300px" type="textarea"  v-model="param.sellerMemo" placeholder="请输入备注"></el-input>
        </el-form-item>
       </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sendBtn">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="物流详情" :visible.sync="addressState" width="50%">
      <el-timeline v-if="!tipState">
        <el-timeline-item  
          v-for="(item, index) in listInfo.list"
          :key="index"
          :timestamp="item.datetime">
          {{item.remark}}
        </el-timeline-item>
      </el-timeline>
      <div style="text-align:center" v-else>暂无物流信息</div>
    </el-dialog>
  </div>


</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");
  import $ from 'jquery'
  export default {
    data() {
      return {
        detail: {},
        message: "",
        type:'',
        statusDict: {
          "WAIT_SEND":"待发货",
          "WAIT_PAY": "未支付",
          "PART_SEND": "部分发货",
          "WAIT_GET": "待收货",
          "EVALUATION": "待评价",
          "COMPLETED": "已完成",
          "CANCEL_USER": "用户主动取消",
          "CANCEL_ADMIN": "后台取消",
          "CANCEL_TIMEOUT": "超时取消",
          "REFUND_COMPLEDE":"售后完成"
        },
        param:{
          "logistics": "",
          "logisticsCompany": "",
          "orderCode": "",
          "sellerMemo": ""
        },
        dialogVisible:false,
        selectArr:[],
        addressState:false,
        listInfo:'',
        tipState:false

      };
    },
    components:{
    },
    mounted() {
      this.getDict()
      this.type = this.$route.query.type
      this.getDetail()
    },
    methods: {
      getLogD(obj){
        this.addressState = true
        let url = CONSTANT.URL.LIST.expQueryParam
        common.post(url, {  
          com:obj.logisticsCompany,
          no:obj.logistics
        }, res => {
          if (res.code == 200) {
            let data = res.data.bussData
            this.listInfo = data?JSON.parse(data):{}
            if(!this.listInfo||!this.listInfo.list){
              this.tipState = true
            }else{
              this.tipState = false
            }
          }
        })
      },
      getDict(){
        let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY
        common.get(url, 'exp', res => {
          if (res.code == 200) {
            this.selectArr = res.data.bussData
          }
        })
      },
      sendBtn(){
        if(!this.param.logisticsCompany){
          this.$message({
            type: "warning",
            message: '请输入物流公司'
          });
          return
        }
        if(!this.param.logistics){
          this.$message({
            type: "warning",
            message: '请输入物流单号'
          });
          return
        }
        let url = CONSTANT.URL.ORDER.actionOrderSend;
          common.post(url, this.param, res => {
            if (res.code == 200) {
              this.$message({
                  type: "success",
                  message: "发货成功!"
                });
                this.dialogVisible = false
                this.getList();
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
      },
      sendProduct(obj) {
        this.param = {
          "logistics": "",
          "logisticsCompany": "",
          "orderCode": obj.orderCode,
          "sellerMemo": ""
        }
        this.dialogVisible = true
      },
      getDetail(){
        let url = CONSTANT.URL.LIST.actionOrderDetail
        common.get(url, this.$route.query.orderCode, res => {
          if (res.code == 200) {
            this.detail = res.data.bussData
            this.message = res.data.bussData.sellerMemo
          }
        })
      },
      handleRemark() {
        let url = CONSTANT.URL.ORDER.orderRemark
        common.get(url, this.detail.id+"/"+this.message, res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "修改备注成功"
            })
            this.dialogVisible = false
            this.getDetail()
          }
        })
      },
      editorInfo(val){
        this.information.detail = val;
      },
      resetForm(formName) {this.$refs[formName].resetFields();},
      back(){ this.$router.back()  },
    }
  }
</script>
<style lang="scss">
  .container .main .el-form-item {
    margin-bottom: 0px;
  }
  .order-detail {
    .btns{
      margin-top: 20px;
      text-align: center;
    }
    .table-group{
      .el-table__header{
        th{
          background-color: #ddd;
          .cell{
            color: #666!important;
            font-size: 14px;
          }
          
        }
      }
    }
    .table-content1{
      background-color: #ddd;
      .content-item{
        display: flex;
        height: 50px;
        align-items: center;
        .table-list{
          flex: 1;
          font-size: 14px;
          color: #333;
          padding-left: 40px;
        }
      }
    }
    .title-desc{
      position: relative;
      height: 50px;
      line-height: 50px;
      padding-left: 15px;
      &:after{
        content: '';
        position: absolute;
        width: 5px;
        height: 20px;
        left: 0;
        top: 15px;
        background-color: #666;
      } 
    }
    .group-wrap{
      display: flex;
      border-left: 1px solid #eee;
      border-bottom: 1px solid #eee;
      .group-item{
        flex: 1;
        border-right: 1px solid #eee;
        .group-title{
          background-color: #ddd;
          height: 40px;
          line-height: 40px;
          padding-left: 20px;
          font-size: 14px;
        }
        .group-table{
          padding-left: 20px;
          font-size: 14px;
          color: #666;
          .table-m{
            min-height: 40px;
            line-height: 40px;
            display: flex;
            .m-name{
              width: 120px;
              text-align: right;
            }
          }
        }
      }
    }
    .table-item{
      .el-form-item__content{
        margin-left: 60px!important;
      }
    }
    .el-form-item__label {
      text-align: left;
      color: #A5A5A5;
      margin-left: 60px;
    }
    .el-form-item{
      margin-bottom: 5px!important;
    }
    .el-form-item__label {
      text-align: left;
      margin-left: 60px;
    }
  }
</style>
